<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title th:text="${vote.title}">Title</title>
    <script th:src="@{/static/ckeditor/ckeditor.js}"></script>
</head>
<body>
<div th:replace="header :: nav"></div>

<script>
    function vote(option) {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        var vote = {
            "optionId": option,
        }
        $.ajax({
            url: "/vote",
            type:"POST",
            beforeSend: function(request) {
                request.setRequestHeader(header, token);
            },
            timeout:5000,
            data: vote,
            success: function (result) {
                window.location.reload()
            },
            error:function (err) {
                alert("网络错误！"+err.toString());
            }
        });
    }

    function finishVote(voteId){
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        var vote = {
            "voteId": voteId,
        }
        $.ajax({
            url: "/finishVote",
            type:"POST",
            beforeSend: function(request) {
                request.setRequestHeader(header, token);
            },
            timeout:5000,
            data: vote,
            success: function (result) {
                window.location.reload()
            },
            error:function (err) {
                alert("网络错误！"+err.toString());
            }
        });
    }
</script>
<div class="container">
    <div class="form-horizontal text-center">
        <div class="form-group">
            <h2 th:text="${vote.title}"></h2>
        </div>
        <div class="form-group jumbotron">
            <div rows="10" cols="80" th:utext="${vote.content}">
                世界上最好的语言是...
            </div>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
            </script>
        </div>
        <div class="form-group" th:if="${canFinish}">
                <a href="#" th:onclick="'finishVote(\''+${vote.id}+'\')'" class="list-group-item list-group-item-warning">结束该投票</a>
        </div>
        <div class="form-group">
            <div class="list-group text-center" th:each="option : ${vote.voteOptions}" th:if="${canVote}">
                <div>
                    <a href="#" th:onclick="'vote('+${option.id}+')'" class="list-group-item active" th:text="${option.name}"></a>
                </div>
            </div>

            <label th:text="${vote.status==1}?'投票进行中':'投票结果'"></label>
            <div class="list-group text-center" th:each="option : ${vote.voteOptions}" th:if="not ${canVote}">
                <div class="list-group-item">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title" th:text="'选了 '+${option.name}+' 的有:'">Panel title</h3>
                        </div>
                        <div class="panel-body" th:text="${option.approver}">
                            Panel body ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>